<!--调试科研创新管理-能力建设年度计划查询-->
<template>
  <PageTemplate>
    <div class="plan-list" slot="content">
      <el-form
        inline
        :model="query"
        ref="query"
        label-position="right"
        label-width="110px"
        class="search-collapse-pro-form"
      >
        <SearchCollapsePro>
          <div slot="title" class="search-collapse-pro-title">
            <el-form-item label-width="0px">
              <el-input v-model="query.planName" placeholder="计划名称">
                <el-button slot="append" icon="el-icon-search" @click="queryDataTableLike"></el-button>
              </el-input>
            </el-form-item>
          </div>
          <div slot="collapse">
            <!-- 高级搜索具体内容 -->
            <el-row>
                <el-col :span='8'>
                    <el-form-item label="项目名称" prop="projectName">
                         <el-input v-model="query.projectName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='8'>
                   <el-form-item label="年度" prop="year">
                    <el-select
                          v-model="query.year"
                          placeholder="请选择">
                          <el-option
                            v-for="(item,index) in allYear"
                            :key="index"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span='8'>
                    <el-form-item label="负责人" prop="leadingManName">
                      <PersonSelect
                        :value="query.leadingManName"
                        v-bind:multiple="false"
                        ref="leadingMan"
                        size="">
                      </PersonSelect>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span='8'>
                    <el-form-item label="计划状态" prop="status">
                        <el-select v-model="query.status"  placeholder="请选择">
                            <el-option label="进行中" value="1"></el-option>
                            <el-option label="已关闭" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 查询和重置按钮-->
            <el-row :gutter="10">
              <div class="btn-group-search">
                <el-col :span="2">&nbsp;</el-col>
                <el-col :span="6">
                  <el-button
                    type="primary"
                    class="btn-default"
                    @click="getAllDataTable"
                    size="small"
                  >{{$t('cm.query')}}</el-button>
                  <el-button
                    class="btn-second"
                    @click="queryReset('query')"
                    style="margin:0;"
                    size="small"
                  >{{$t('cm.reset')}}</el-button>
                </el-col>
              </div>
            </el-row>
          </div>
        </SearchCollapsePro>
      </el-form>
      <el-row class="row-empty-20"></el-row>
      <PageTableCollapse :collapseStatus="true">
        <el-row slot="title">
          <el-col>
            <div>
              <!-- v-if="showBtn" -->
              <el-button  icon="el-icon-download" type="primary" @click="exportHandle">
                 导出
              </el-button>
            </div>
          </el-col>
        </el-row>
        <el-table
          class="table"
          border
          ref="multipleTable"
          :data="tables"
          tooltip-effect="dark"
          style="width: 100%"
          :show-overflow-tooltip="true"
          @selection-change="handleSelectionChange"
          :header-cell-style="{background:tableHeaderBGC}"
        >
          <el-table-column align="center" type="selection" width="60"></el-table-column>
          <el-table-column type="index" :index="indexMethod" :label="$t('cm.no')" align="center" width="60" fixed></el-table-column>
          <el-table-column prop="planName" label="计划名称" align="center"></el-table-column>
          <el-table-column prop="projectName" label="能力建设项目名称" align="center" width="200"></el-table-column>
          <el-table-column prop="year" label="年度" align="center"></el-table-column>
          <el-table-column prop="leadingmanName" label="负责人" align="center"></el-table-column>
          <el-table-column
            prop="status" label="状态" align="center"
              :formatter="(row)=>{
              let result = '';
              switch (row.status-0) {
                case 0:
                  result = '已关闭';
                  break;
                case 1:
                  result = '进行中';
                  break;
              }
              return result;
            }"></el-table-column>
          <el-table-column prop="createUserName" label="计划提交人" align="center"></el-table-column>
          <el-table-column prop="createTime" label="计划提交日期" :formatter="dateFormatstart" align="center"></el-table-column>
          <el-table-column prop="processFinalTime" label="审批完成日期"  align="center"></el-table-column>
          <el-table-column :label="$t('cm.operate')" prop="statussss" fixed="right" align="center" width="220"  v-if="isSys ==='false'">
            <!-- :show-btn="showBtn" -->
            <template slot-scope="scope">
              <ListBtnSys :options="sysbtns" :is-sys='isSys' :row-data="scope.row" @triggerListBtn="handleListBtn"></ListBtnSys>
            </template>
          </el-table-column>
          <el-table-column :label="$t('cm.operate')" prop="statussss" fixed="right" align="center" width="220" v-if="isSys ==='true'">
             <!-- :show-btn="showBtn" -->
            <template slot-scope="scope">
              <ListBtn :options="btns" :row-data="scope.row" @triggerListBtn="handleListBtn"></ListBtn>
            </template>
          </el-table-column>
        </el-table>
        <div class="block pager-customer">
          <el-pagination
            background
            layout="total,prev,pager, next,jumper"
            :current-page.sync="pagingCurrentPageNum"
            :page-sizes="pagingPageSizes"
            :page-size="pagingPageSize"
            :total="pagingTotal"
            @size-change="pagingHandleSizeChange"
            @current-change="pagingHandleCurrentChange"
          >
          </el-pagination>
        </div>
      </PageTableCollapse>
    </div>
  </PageTemplate>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import PageTemplate from '@/components/common/PageTemplate'
import PageTableCollapse from '@/components/common/PageTableCollapse'
import SearchCollapsePro from '@/components/common/SearchCollapsePro'
import ListBtn from '@/components/btn/ListBtn'
import { ALERT } from '@/utils/responseHandle'
import * as Constant from '@/utils/constant'
import {COMMON} from '@/utils/commonUtil'
import Pagination from '@/mixins/Pagination'
import HasBtn from '@/mixins/HasBtn'
import api_sri from '@/api/api_sri'
import sys_manage from '@/api/sys_manage'
import PersonSelect from '@/components/asc/PersonSelect'
import {dateFtt} from '@/utils/datetime'
import ListBtnSys from '@/components/btn/ListBtnSys'
import { getUserRoles } from '@/api/api.js'
export default {
  components: {
    PageTemplate,
    PageTableCollapse,
    SearchCollapsePro,
    ListBtn,
    PersonSelect,
    ListBtnSys
  },
  data () {
    return {
      query: {
        projectName: null,
        leadingMan: null,
        status:null,
        year:null,
        planName:null,
      },
      tables:[],
      btns: [
      {
        value: 'look',
        label: 'cm.look'
      },
      {
        value: 'alter',
        label: 'cm.alter'
      },
      {
        value: 'progress',
        label: 'cm.progress'
      },
      {
        value: 'close',
        label: 'cm.close'
      }
    ],
     sysbtns: [
      {
        value: 'look',
        label: 'cm.look',
        isdba: 'true'
      },
      {
        value: 'alter',
        label: 'cm.alter',
        isdba: 'false'
      },
      {
        value: 'progress',
        label: 'cm.progress',
        isdba: 'true'
      },
      {
        value: 'close',
        label: 'cm.close',
        isdba: 'false',
      }
      ],
    isSys: '',
    nextThreeYear:[],//往后三年
    allYear:[],//所有年份

    }
  },
  created () {
    //获取往后3年年份
    // this.getNextThreeYear()
    this.getAllYear();
    this.getAllDataTable();
    this.getNowUserRole()
  },
  mixins: [Pagination, HasBtn],
  computed: {
    ...mapState({
      tableHeaderBGC: state => state.common.tableHeaderBGC
    })
  },
  methods:{
      //获取角色权限
      getNowUserRole(){
        let _this = this;
        getUserRoles({}).then((result) => {
          if (result.status == "200" && result.data.code == "0") {
        console.log("==biaozhuan==244===:",result.data.data);
            let dataList = result.data.data
          // sysadmin 系统管理员
          const isAdmin = dataList.some(item => item ==='sysadmin')
          console.log('===isAdmin:',isAdmin)
          if(isAdmin){
            _this.isSys= 'true'
          }else{
            _this.isSys= 'false'
          }
        //console.log("deptNamePath",result.data.data.deptNamePath);
          } else {
            _this.$alert(result.data.msg, _this.$t('cm.tips'));
          }
        }).catch((err) => {
          _this.$alert(err,_this.$t('cm.tips'));
        });
      },
dateFormatstart(thistime, fmt) {
          if (!COMMON.isNullOrUndefinedOrSpace(thistime.createTime)) {
                var date = new Date(thistime.createTime)
                var month =date.getMonth()+1;if(month<10){month="0"+month;}
                var day =date.getDate();if(day<10){day="0"+day;}
                var hours =date.getHours();if(hours<10){hours="0"+hours;}
                var min= date.getMinutes();if(min<10){ min="0"+min; }
                var sec= date.getSeconds();if(sec<10){sec="0"+sec;}
              return  date.getFullYear() + '-' + month + '-' + day
          }
              return thistime.createTime
        },
     //获取全部字典
    getAllMap(){
       //索引类别字典
      this.sysDictLoadByPaging("achievement_index_type",(result)=>{
          this.indexTypeMap = result.data
      })
    },
    //获取字典接口
    sysDictLoadByPaging (key,callback) {
      sys_manage.sysDictLoadByPaging({dictGroupKey: key}, result => {
        if (result.code === Constant.RT_SUCCESS) {
          callback(result)
        } else {
          ALERT.error(result.msg)
        }
      })
    },
    //获取往后3年年份
    getNextThreeYear(){
      api_sri.sriGainGetNextThreeYear({}, result => {
        if (result.code === Constant.RT_SUCCESS) {
          this.nextThreeYear = result.years
        } else {
          ALERT.error(result.msg)
        }
      })
    },
    //获取所有年份
    getAllYear(){
      api_sri.sriGainGetCapacityBuildingGetAllYear({}, result => {
        if (result.code === Constant.RT_SUCCESS) {
          this.allYear = result.years
        } else {
          ALERT.error(result.msg)
        }
      })
    },
    handleListBtn({btn,row}){
      if(btn==="look"){//查看
        COMMON.routerTo(Constant.ROUTE_SRI_GAIN_CBP_PLAN_LOOK.index, this.$router, { id: row.id })
      }else if(btn==='progress'){//进展提交
         COMMON.routerTo(Constant.ROUTE_SRI_GAIN_CBP_PROGRESS.index, this.$router, { id: row.id, planName:row.planName})
      } else if(btn==='alter'){//变革
        COMMON.routerTo(Constant.ROUTE_SRI_GAIN_CBP_PLAN_EDIT.index, this.$router, { id: row.id})
      } else {//关闭
        COMMON.routerTo(Constant.ROUTE_SRI_GAIN_CBP_PLAN_CLOSE.index, this.$router, { id: row.id})
      }
    },
    //重置操作
    queryReset (formName) {
      this.$refs[formName].resetFields()
    },
    //导出excel之前,勾选id
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.query.ids = [];
      val.forEach(item => {
        this.query.ids.push(item.id);
      });
    },
    // 导出
    exportHandle () {
       let params = Object.assign({},this.query,{
        pageNum:this.pagingCurrentPageNum,
        pageSize:this.pagingPageSize
      })
      let fileName = `调试科研创新管理_能力建设计划管理_能力建设计划查询_${dateFtt('yyyy-MM-dd', new Date())}`
      api_sri.sriGainGetCapacityBuildingExportExcel(params, response => {
        if (response.code === Constant.RT_SUCCESS) {
          COMMON.downloadLinkByUrl(response.data.webRequestUrl, fileName)
        } else {
          ALERT.alertResp(response)
        }
      })
    },
    queryDataTableLike () {
      this.getAllDataTable();
    },
     getAllDataTable () {
      if(this.$refs.leadingMan){
        this.$set(this.query, "leadingManName", COMMON.changePersonSelectData(this.$refs.leadingMan, false).peopleName)
        this.$set(this.query, "leadingMan", COMMON.changePersonSelectData(this.$refs.leadingMan, false).peopleNumber)
      }
      this.queryTableList({
        ...this.query,
        pageNum: this.pagingCurrentPageNum,
        pageSize: this.pagingPageSize
      })
    },
    //统一与后台操作的方法
    queryTableList (params) {
      //这里的params是对象
      //注意 如果后台json转对象 时间类型好像会抛异常  转到后台 前台用 qs 来转换数据 设置一个全局拦截器 main.js 参考
      let _this = this
      let tables = []
      let totalCount = 0
      api_sri.sriGainCapacityBuildingPlanList(params, result => {
        if (result.code === Constant.RT_SUCCESS) {
          //表格数据  数组
          tables = result.data.results
          //分页数据
          totalCount = result.data.totalRows
        } else {
          // _this.$t('cm.tips')
          ALERT.error(result.data.msg)
        }
        _this.setPagingTotal(totalCount)
        this.tables = tables
      })
    },
  }
}

</script>

<style lang="scss">

</style>
